<template>
  <div>
    <div class="guild-content">
      <div class="guild-user">
        <div class="guild-user-vuew">
          <img src="https://t11.baidu.com/it/u=2407335962,4159351460&fm=58&app=83&f=JPEG?w=200&h=132" alt="">
          <span>ASDASDASDASD</span>
        </div>
      </div>
      <div class="guild-list" v-for="(guild,index) in payrallList" :key="index">
        <div class="guild-logo">
          <img src="https://img0.baidu.com/it/u=1661545295,4198669375&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1726246800&t=3045780ebf845703fcbd0ffb3275d639" alt="">
        </div>
        <div class="guild-area">
          <img src="https://t11.baidu.com/it/u=2407335962,4159351460&fm=58&app=83&f=JPEG?w=200&h=132" alt="">
          <span>{{ guild.name }}</span>
        </div>
        <div class="guild-btn">
          <span class="green">Transfer</span>
          <span class="red" @click="handleDetails(guild)">Delete</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  layout: 'Payroll',
  filters: {
    priceFormat(value) {
      return Number(value).toFixed(2)
    }
  },
  data() {
    return {
      value:'',
      dialogVisible:false,
      payrallList:[
        {
          logo:'https://img0.baidu.com/it/u=1661545295,4198669375&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1726246800&t=3045780ebf845703fcbd0ffb3275d639',
          area:'https://t11.baidu.com/it/u=2407335962,4159351460&fm=58&app=83&f=JPEG?w=200&h=132',
          name:'Boss agncey',
          number:102222,
          details:[
            {
              time:'2024-09-13',
              revenue:290
            }
          ]
        },
        {
          logo:'https://img0.baidu.com/it/u=1661545295,4198669375&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1726246800&t=3045780ebf845703fcbd0ffb3275d639',
          area:'https://t11.baidu.com/it/u=2407335962,4159351460&fm=58&app=83&f=JPEG?w=200&h=132',
          name:'Boss agncey',
          number:102222,
          details:[
            {
              time:'2024-09-13',
              revenue:290
            }
          ]
        },
        {
          logo:'https://img0.baidu.com/it/u=1661545295,4198669375&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1726246800&t=3045780ebf845703fcbd0ffb3275d639',
          area:'https://t11.baidu.com/it/u=2407335962,4159351460&fm=58&app=83&f=JPEG?w=200&h=132',
          name:'Boss agncey',
          number:102222,
          details:[
            {
              time:'2024-09-13',
              revenue:290
            }
          ]
        },
        {
          logo:'https://img0.baidu.com/it/u=1661545295,4198669375&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1726246800&t=3045780ebf845703fcbd0ffb3275d639',
          area:'https://t11.baidu.com/it/u=2407335962,4159351460&fm=58&app=83&f=JPEG?w=200&h=132',
          name:'Boss agncey',
          number:102222,
          details:[
            {
              time:'2024-09-13',
              revenue:290
            }
          ]
        },
      ],
      payrallDetails:{},
      detailsList:[
        {
          time:'2024-09-13',
          revenue:290
        },
        {
          time:'2024-09-13',
          revenue:290
        },
        {
          time:'2024-09-13',
          revenue:290
        },
        {
          time:'2024-09-13',
          revenue:290
        },
        {
          time:'2024-09-13',
          revenue:290
        }
      ]
    }
  },
  computed: {
   
  },
  created() {
  },
  mounted() {
   
  },
  
  methods: {
    // 查看详情
    handleDetails(guild){
      console.log('guild',guild)
      console.log('payrallDetails',this.payrallDetails)
      showConfirmDialog({
        title: 'Prompt',
        confirmButtonText:'Delete',
        cancelButtonText:'Cancel',
        confirmButtonColor:'#00F9E5',
        cancelButtonColor:'#E1E1E1',
        theme: 'round-button',
        message:'Do you want to delete it ?',
      })
      .then(() => {
        // on confirm
      })
      .catch(() => {
        // on cancel
      });
      
    }
  },
}
</script>

<style scoped lang="scss">
  #app{
    background-color: #F7F7F7 !important;
  }
  .guild-content {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 15px;
    .guild-list{
      width: 100%;
      height: 60px;
      box-sizing: border-box;
      padding: 10px;
      border-radius: 10px;
      margin-top: 15px;
      background: url(https://img2.baidu.com/it/u=1572405165,3277723861&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500);
      background-size: cover;
      position: relative;
      .guild-logo{
        width: 40px;
        height: 40px;
        float: left;
        margin-right: 10px;
        img{
          width: 40px;
          height: 40px;
          display: block;
          border-radius: 2px;
        }
      }
      .guild-area{
        height: 40px;
        box-sizing: border-box;
        padding: 10px 0;
        float: left;
        img{
          width: auto;
          height: 20px;
          display: inline-block;
        }
        span{
          font-size: 15px;
          line-height: 20px;
          margin-left: 10px;
          color: #FFFFFF;
        }
      }
      .guild-btn{
        height: 40px;
        border-radius: 15px;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: #999999;
        float: right;
        .green{
          color: green;
        }
        .red{
          margin-left: 10px;
          color: red;
        }
      }
    }
    .guild-user{
      width: 100%;
      height: 90px;
      background: url(https://img2.baidu.com/it/u=4163021050,1192974357&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=250);
      background-size: cover;
      box-sizing: border-box;
      padding:30px;
      border-radius: 50px;
      justify-content: center;
      align-items: center;
      .guild-user-vuew{
        img{
          height: 30px;
          display: inline-block;
        }
        span{
          font-size: 16px;
          line-height: 30px;
          color:#FFF;
        }
      }
      
    }
    .guild-user-list{
      width: 100%;
      height: 60px;
      box-sizing: border-box;
      padding: 10px 15px;
      border-radius: 10px;
      margin-top: 20px;
      background-color: #FFF;
      position: relative;
      line-height: 40px;
      .item-icon{
        width: 40px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        color: #999;
        position: absolute;
        right: 0;
        top: 0;
        font-size: 24px;
      }
    }
  }
</style>
